

<template>

  <div>

    <div style="display: flex;">
      <div align="left" style="width: 40% ;">

       <span style="margin-right: 30%">分数</span>  排名 <br>
      <el-input v-model="score" :disabled="true" placeholder="仅供查看分数" size="medium" style="width: 35%;margin-right: 10px"></el-input>

      <el-input v-model="rank" blur="checkRange" placeholder="请输入排名" size="medium" style="width: 35%" ></el-input>
      <br>
      选科
      <el-checkbox-group v-model="selection" size="medium" :min="0"
                         :max="3">
        <el-checkbox-button v-for="subject in subjects" :label="subject" :key="subject">{{subject}}</el-checkbox-button>
      </el-checkbox-group>
    </div>
      <div align="left" style="margin-left: 20px;width: 70%">省份 <br>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
        </el-checkbox-group>

      </div>
  </div>

    <div align="left" style=";">
      <span style="margin-right: 13%">大学</span>    <span style="margin-right: 13%">专业</span> 专业大类
      <br>
    <el-input v-model="universityName" placeholder="请输入大学名称" size="medium" style="width: 15%;margin-right: 10px " ></el-input>
    <el-input v-model="majorName" placeholder="请输入专业名称" size="medium" style="width: 15%;margin-right: 10px"></el-input>
    <el-input v-model="majorName2" placeholder="请输入专业大类名称" size="medium" style="width: 15%;margin-right: 5%"></el-input>

     <el-button
         type="primary" style="height: 40px;" size="medium"
         @click="search"> <i class="el-icon-search" style="color: white"></i>
       搜索
     </el-button>
  </div>
    <br>
    <!--表-->
    <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" stripe
              style="width: 100%"  :cell-style="changeCellStyle">
      <el-table-column prop="major" label="专业名称" class="bold"></el-table-column>
      <el-table-column prop="major" label="专业大类"></el-table-column>
      <el-table-column prop="university_category" label="学科领域"></el-table-column>
      <el-table-column prop="university" label="大学名称" class="bold"></el-table-column>
      <el-table-column prop="feature" label="院校特色"class="bold" ></el-table-column>
      <el-table-column prop="degree" label="层次" ></el-table-column>
      <el-table-column prop="requirement" label="选课要求" ></el-table-column>

<!--      <el-table-column prop="lowestRank" label="最低位次"></el-table-column>-->
<!--      <el-table-column prop="score" label="分数线"></el-table-column>-->
<!--      <el-table-column prop="province" label="省份"></el-table-column>-->
      <el-table-column  label="状态">

          <template slot-scope="scope">
         <p v-if="scope.row.lowestRank>10000"  >冲</p>
<!--          <p v-else-if="lowestRank <100+1000 && lowestRank >=100-1000">稳</p>-->
<!--         <p v-else-if="lowestRank <100-1000 && lowestRank >=100-3000">保</p>-->
        </template>
      </el-table-column>
      <el-table-column >
        <template slot-scope="scope">
          <el-button align="left" @click="xiangqing(scope.row);" >详情</el-button>
        </template>


      </el-table-column>



    </el-table>

    <el-dialog :visible.sync="dialogVisible" title="详情">
      <div>
        {{nowXiangqing.annualFee }}
        <p class="AnnualFee">Annual Fee: {{ nowXiangqing.annualFee }}</p>
        <p>Batch: {{ nowXiangqing.batch }}</p>
        <p>City: {{ nowXiangqing.city }}</p>
        <p>Degree: {{ nowXiangqing.degree }}</p>
        <p>Educational System: {{ nowXiangqing.educationalSystem }}</p>
        <p>Feature: {{ nowXiangqing.feature }}</p>
        <p>ID: {{ nowXiangqing.id }}</p>
        <p>Lowest Rank: {{ nowXiangqing.lowestRank }}</p>
        <p>Major: {{ nowXiangqing.major }}</p>
        <p>Major ID: {{ nowXiangqing.majorId }}</p>
        <p>Number of Plans: {{ nowXiangqing.numberofPlans }}</p>
        <p>Province: {{ nowXiangqing.province }}</p>
        <p>Requirement: {{ nowXiangqing.requirement }}</p>
        <p>Score: {{ nowXiangqing.score }}</p>
        <p>Type 1: {{ nowXiangqing.type1 }}</p>
        <p>Type 2: {{ nowXiangqing.type2 }}</p>
        <p>University: {{ nowXiangqing.university }}</p>
        <p>University Category: {{ nowXiangqing.universityCategory }}</p>
        <p>University ID: {{ nowXiangqing.universityId }}</p>
      </div>
      <!-- Dialog 底部按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
    </el-dialog>
    <!--    分页-->
    <div style="height: auto">
      <el-pagination
          background
          layout="prev, pager, next,jumper, ->, total"
          :total="tableData.length"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
         >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios, {request} from "axios";


const subjectOptions = ['物理', '化学', '生物', '历史','地理','政治'];
const cityOptions = ['上海', '北京','河北','山西','辽宁','吉林','黑龙江','江苏','浙江','安徽','福建','江西','山东','河南','湖北','湖南','广东','海南','四川','贵州','云南','陕西','甘肃','青海','台湾'];
export default {
  name: "Main1",
  data(){
    return{
      majorName2:null,
      nowXiangqing: {
        annualFee: null,
        batch: null,
        city: null,
        degree: null,
        educationalSystem: null,
        feature: null,
        id: null,
        lowestRank: null,
        major: null,
        majorId: null,
        numberofPlans: null,
        province: null,
        requirement: null,
        score: null,
        type1: null,
        type2: null,
        university: null,
        universityCategory: null,
        universityId: null,
      },

      currentPage: 1, //当前页 刷新后默认显示第一页

      pageSize: 5, //每一页显示的数据量 此处每页显示6条数据
      dialogVisible: false,

      checkAll: false,
       checkedCities: ['上海', '北京'],
      cities: cityOptions,
      isIndeterminate: true,

      score: null,
      rank: null,
      selection: ['物理'],
      universityName:'',
      majorName: null,
      state: null,

      subjects: subjectOptions,
      tableData: [
      ],

    }
  },
  mounted() {
    axios.get('http://localhost:8090/gaokao/findAll')
        .then(response =>{
          this.tableData = response.data
        })
        .catch(error =>{
          console.log(error)
        });

  },
  methods:{



    handleCurrentChange(currentPage) {
      this.currentPage = currentPage; //每次点击分页按钮，当前页发生变化
      // console.log(this.currentPage);
    },

    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    search(){
      // axios.post('http://localhost:8090/gaokao/generateStrategy')
      //     .then(response =>{
      //
      //       this.state = response.data
      //       console.log(this.state)
      //     })
      //     .catch(error =>{
      //       console.log(error)
      //
      //     });


      console.log(this.rank);
      if(this.rank != null){
        axios({
          url:'http://localhost:8090/getScoreByRank',
          params:{
            num2: this.rank
          },
          method:'post'
        }).then(res=>{
          this.score = res.data;
        })
      }


      console.log("aaaa");

      console.log(this.majorName);
      axios({
        url: 'http://localhost:8090/gaokao/selectByMajor',
        params: {
          major: this.majorName
        },
        method: 'get'
      })
          .then(res => {
            console.log(this.majorName);
            this.tableData = res.data; // 更新表格数据
            console.log(this.tableData);
          })
          .catch(error => {
            console.log(error);
          });

    },


    changeCellStyle(row, column, rowIndex, columnIndex){
      if (row.column.label === "专业名称" ||row.column.label === "大学名称") {
        return "color: #389DFF"; // 修改的样式
      }
      else if(row.column.label === "状态"){
        return "color: green";
      }

      else {
        return "";
      }
    },
    xiangqing(row){

      axios({

        url:'http://localhost:8090/gaokao/selectByMajorAndUniversity',
        params:{
          major: row.major,
          university: row.university
        },
        method:'get'
      }).then(res=>{
        this.nowXiangqing=res.data[0];
        this.dialogVisible = true;
        console.log(this.nowXiangqing)
      })
      // this.dialogVisible = true;
      // console.log("2"+this.nowXiangqing.city)
    }

  }
}
</script>

<style>
.el-table{
  height: auto;
}
.el-pagination{
  height: auto;
}
.div{
  height: auto;
}
/deep/.bold{
  font-weight :1000;
}
.AnnualFee{
  color: red;
}
</style>
